<template>
  <div class="dict-grouped-view">
    <div class="page-header">
      <h2>分组字典数据展示</h2>
      <p>展示从后端获取的分组字典数据结构</p>
    </div>

    <div class="action-bar">
      <el-button type="primary" @click="refreshData" :loading="loading">
        <i class="el-icon-refresh"></i>
        刷新数据
      </el-button>
      <el-button @click="clearCache">
        <i class="el-icon-delete"></i>
        清除缓存
      </el-button>
    </div>

    <div class="data-display">
      <!-- 原始API响应数据 -->
      <div class="section">
        <h3>原始API响应数据</h3>
        <el-card>
          <pre>{{ JSON.stringify(apiResponse, null, 2) }}</pre>
        </el-card>
      </div>

      <!-- 分组展示 -->
      <div class="section">
        <h3>分组字典展示</h3>
        <div v-if="groupedData.length === 0" class="empty-state">
          <el-empty description="暂无数据"></el-empty>
        </div>
        <div v-else class="dict-groups">
          <el-card 
            v-for="group in groupedData" 
            :key="group.id" 
            class="dict-group-card"
            shadow="hover"
          >
            <div slot="header" class="group-header">
              <span class="group-name">{{ group.dictName }}</span>
              <el-tag type="info" size="small">{{ group.dictCode }}</el-tag>
              <el-tag type="success" size="small">{{ group.items ? group.items.length : 0 }} 项</el-tag>
            </div>
            
            <div class="group-items">
              <el-table 
                :data="group.items || []" 
                size="small"
                :show-header="false"
                style="width: 100%"
              >
                <el-table-column prop="value" label="值" width="100">
                  <template slot-scope="scope">
                    <el-tag size="mini" type="primary">{{ scope.row.value }}</el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="name" label="名称">
                  <template slot-scope="scope">
                    <span>{{ scope.row.name }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="dictCode" label="字典编码" width="120">
                  <template slot-scope="scope">
                    <el-tag size="mini" type="info">{{ scope.row.dictCode }}</el-tag>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-card>
        </div>
      </div>

      <!-- 转换后的dircs格式数据 -->
      <div class="section">
        <h3>转换后的dircs格式数据</h3>
        <el-card>
          <pre>{{ JSON.stringify(convertedDircs, null, 2) }}</pre>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import { getAllDictGroupedData } from "@/config/dictHelper";

export default {
  name: "DictGroupedView",
  data() {
    return {
      loading: false,
      apiResponse: null,
      groupedData: [],
      convertedDircs: {}
    };
  },
  mounted() {
    this.loadData();
  },
  methods: {
    async loadData() {
      this.loading = true;
      try {
        console.log('开始加载分组字典数据...');
        
        // 调用新的分组字典接口
        const response = await getAllDictGroupedData(this.$store);
        console.log('分组字典API响应:', response);
        
        this.apiResponse = response;
        this.groupedData = response || [];
        
        // 获取转换后的dircs数据
        this.convertedDircs = this.getDircsFromLocalStorage();
        
        this.$message.success('数据加载成功');
      } catch (error) {
        console.error('加载分组字典数据失败:', error);
        this.$message.error('数据加载失败: ' + error.message);
      } finally {
        this.loading = false;
      }
    },
    
    async refreshData() {
      // 清除缓存
      localStorage.removeItem('dictGrouped');
      localStorage.removeItem('dircs');
      
      // 重新加载数据
      await this.loadData();
    },
    
    clearCache() {
      localStorage.removeItem('dictGrouped');
      localStorage.removeItem('dircs');
      this.apiResponse = null;
      this.groupedData = [];
      this.convertedDircs = {};
      this.$message.success('缓存已清除');
    },
    
    getDircsFromLocalStorage() {
      try {
        const dircsData = localStorage.getItem('dircs');
        return dircsData ? JSON.parse(dircsData) : {};
      } catch (error) {
        console.error('解析dircs数据失败:', error);
        return {};
      }
    }
  }
};
</script>

<style scoped>
.dict-grouped-view {
  padding: 20px;
}

.page-header {
  margin-bottom: 20px;
}

.page-header h2 {
  margin: 0 0 10px 0;
  color: #303133;
}

.page-header p {
  margin: 0;
  color: #606266;
  font-size: 14px;
}

.action-bar {
  margin-bottom: 20px;
}

.action-bar .el-button {
  margin-right: 10px;
}

.data-display {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.section {
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
}

.section h3 {
  margin: 0;
  padding: 15px 20px;
  background: #f5f7fa;
  border-bottom: 1px solid #ebeef5;
  color: #303133;
  font-size: 16px;
}

.section .el-card {
  margin: 0;
  border: none;
  box-shadow: none;
}

.section pre {
  background: #f8f9fa;
  padding: 15px;
  margin: 0;
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.5;
  max-height: 300px;
  overflow-y: auto;
}

.empty-state {
  padding: 40px;
  text-align: center;
}

.dict-groups {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 20px;
  padding: 20px;
}

.dict-group-card {
  margin: 0;
}

.group-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.group-name {
  font-weight: bold;
  color: #303133;
  flex: 1;
}

.group-items {
  margin-top: 10px;
}

.el-tag {
  margin-right: 5px;
}
</style>
